import React, { useState, useEffect } from 'react'
import '../../scss/lwl/around.css'
import { NavBar, Toast } from '@nutui/nutui-react'
import { ArrowLeft, Share } from '@nutui/icons-react'
// 间距
import { Space } from '@nutui/nutui-react'
// 选项卡
import { Tabs } from 'react-vant'
// 商品卡片
import { ProductCard, Tag } from 'react-vant';
// 文本省略
import { Ellipsis, Cell } from '@nutui/nutui-react'
import { useNavigate } from 'react-router-dom'
import axios from 'axios'
export default function Login() {
    const jump = useNavigate()
    // 这个位置调整头部盒子占比
    let [height, setHeight] = useState('25vh')
    // 选项卡
    const items = [
        {
            id: 0,
            name: '临地铁'
          },
          {
            id: 1,
            name: '设备齐全'
          },
          {
            id: 2,
            name: '有阳台'
          },
          {
            id: 3,
            name: '环境优美'
          },
          {
            id: 4,
            name: '交通便利'
          },
    ]
    //文本省略
    const content = 'NutUI3.0上线后我们研发团队也在不断的优化、测试、使用、迭代 Vue3 的相关组件，但是在跨端小程序的开发过程中，发现没有合适的组件库可以支持多端开发。为了填补这一空白，同时为了优化开发者体验，让 NutUI 能够为更多的开发者带来便利，我们决定在 NutUI 中增加小程序多端适配的能力。'
    // 

    const [arr, setArr] = useState([])
    const getData = async () => {
        let { data: { house } } = await axios.get('http://localhost:3000/house')
        setArr(house)
    }
    useEffect(() => {
        getData()
    }, [])
    return (
        <div id='around'>
            <div id="around_head">
                <NavBar
                    style={{
                        paddingTop: "20px",
                        // 设置为透明色
                        backgroundColor: 'transparent',
                    }}
                    back={<ArrowLeft style={{ color: 'fff' }} />}
                    right={<Share style={{ color: 'fff' }} />}
                    onBackClick={() => { jump(-1) }}
                >
                </NavBar>
                <h2>福港园大厦</h2>
                <h2>周边“临地铁”房源</h2>
            </div>
            <div id="around_list">
                <Tabs background="#fff"
                    defaultActive={0}>
                    {items.map(item => (
                        <Tabs.TabPane key={item} title={`${item.name}`}>
                            {/* 列表项 */}
                            {arr.filter(i=>i.tip.includes(item.name)).map(ele => (
                                <div key={ele._id} onClick={()=>{jump(`/detail?id=${ele._id}`)}} style={{ display: 'flex', padding: '5vw', boxSizing: 'border-box', height: '170px' }}>
                                    {/* 左侧图片 */}
                                    <div style={{ height: 130, width: 130, }} >
                                        <img style={{ width: '100%', height: '80%', borderRadius: '10px' }}
                                            src='https://ts1.cn.mm.bing.net/th/id/R-C.494ad45a2d5fc5f4d1abd13ed396ea4b?rik=b9bigBP2KgNFUw&riu=http%3a%2f%2fimg1n.soufunimg.com%2fzxb%2f2016_03%2f08%2f40%2f11%2fpic%2f002020463900.jpg&ehk=15NoC6zqXHZRi8%2f4buj9LJkoPNIZSkZYux5MV%2b8YLIc%3d&risl=&pid=ImgRaw&r=0' />
                                    </div>
                                    {/* 详细信息 */}
                                    <div style={{ flex: '1', margin: '0 0 0 2vw', }}>
                                        {/* 标题 */}
                                        <p style={{ margin: 0, padding: 0, fontSize: 16 }}>
                                            <Ellipsis rows={2} content={'实图真价' + ' ' + ele.name + '地势好,房东好说话,房屋精修，配套齐全'} ></Ellipsis>
                                        </p>
                                        {/* 简介 */}
                                        <div style={{ margin: '10px 0', padding: 0, color: 'gray' }}>
                                            <Ellipsis rows={1} style={{ fontSize: '13px', color: 'gray' }} content={ele.house_type + '·' + ele.house_area + 'm²' + '·' + ele.plot + '·'} ></Ellipsis>
                                        </div>
                                        {/* 标签 */}
                                        <p style={{ margin: 0, padding: 0 }}>

                                            <Space>
                                                {ele.tip.map((item, index) => (
                                                    <Tag key={index} style={{ backgroundColor: 'rgb(237,239,246)', color: 'blue' }}>{item}</Tag>))}
                                            </Space>

                                        </p>
                                        {/* 价格 */}
                                        <p style={{ marginTop: '5px', padding: 0 }}>
                                            <p style={{ color: 'orange', fontSize: '17px' }}>
                                                <span style={{ fontWeight: '700' }}>{ele.price}</span>
                                                <span>元/月</span>
                                            </p>
                                        </p>
                                    </div>
                                </div>
                            ))}

                        </Tabs.TabPane>
                    ))}
                </Tabs>
            </div>

        </div>


    )
}



